<template>
	<div>
		<a-date-picker
			v-model:value="dateValue"
			value-format="YYYY-MM-DD"
			:placeholder="placeholder"
			:showToday="false"
			:open="datePickerShow"
			@change="handleChange"
			@openChange="handleOpenChange"
			style="width: 100%">
			<template #renderExtraFooter>
				<a-button @click="setDate" type="link">长期</a-button>
			</template>
		</a-date-picker>
	</div>
</template>

<script setup>
	import dayjs from 'dayjs'
	import { ref, watch } from 'vue'

	const emits = defineEmits(['update:dateValue','change'])
	const props = defineProps({
		placeholder: {
			type: String,
			default: '请选择日期'
		},
		modelValue: {
			type: String,
			default: ''
		}
	})

	const dateValue = ref(props.modelValue)
	watch(dateValue, (newValue) => {
		emits('update:modelValue', newValue)
	});

	const datePickerShow = ref(false)
	const setDate = () => {
		dateValue.value = "2099-12-31"
		handleOpenChange(false)
	}

	const handleChange = (value) => {
		emits('change', value)
	};

	const handleOpenChange = (status) =>  {
		datePickerShow.value = status
	}
</script>
